<template>

	<view class="page-wapper" >

		<view class="top-info">
			<view class="" style="height: 06rpx;">

			</view>
			<view class="status-bar">

			</view>
			<view class="left ss-flex" @tap="LC.$router.go('/pages/user/edit')">
				<image :src="info.avatar" mode="" class="avatar" style="border-radius: 50%;"></image>
				<view class="info">
					<view class="title">
						{{info.nickname}}
					</view>
					<view class="id">
						ID:{{info.code}}
					</view>
				</view>
				<view class=" ss-flex ss-row-center qd"  @tap="LC.$router.go('/pages/user/sign')">
					<image src="../../static/qd.png" mode=""></image> 签到
				</view>
			</view>
		</view>
		<view class="databannar">
		<!-- 	<view class="databannar-top" v-if="!info.is_lecturer"  @tap="tojs('')">
				<view class="left ss-flex">
					<image src="/static/cwzz.png" mode=""></image>
					成为作者可获得收益
				</view>
				<view class="right" v-if="info.is_lecturer_status===0">
					立即申请>
				</view>
			</view> -->
			<view class="databannar-bot">
				<view class="item" @tap="dh.open()">
					<view class="value">
						{{info.score}}
					</view>
					<view class="title">
						我的积分
					</view>
				</view>
			<!-- 	<view class="item">
					<view class="value">
						{{info.score}}
					</view>
					<view class="title">
						观看记录
					</view>
				</view> -->
				<view class="item">
					<view class="value">
						{{info.share_num}}
					</view>
					<view class="title">
						我的邀请
					</view>
				</view>
				<view class="item"  @tap="LC.$router.go('/pages/user/sy')">
					<view class="value">
						{{info.lecturer_sy}}
					</view>
					<view class="title" >
						讲师收益
					</view>
				</view>
			</view>
		</view>
		<view class="coin-wapper">
			<view class="coin ss-flex">
				<view class="left ss-flex" @tap="LC.$router.go('/pages/user/rechangeLog/rechangeLog')">
					<image src="/static/coin.png" mode="" class="icon"></image>
					我的金币
					<text>{{info.money}}</text>
				</view>
			
				<button class="cz" @tap="LC.$router.go('/pages/user/rechange')">充值</button>
			</view>
			<view class="coin ss-flex" >
				<view class="left ss-flex" @tap="LC.$router.go('/pages/user/yj/yjlog')">
					<image src="/static/yj.png" mode="" class="icon"></image>
					我的佣金
					<text>{{info.commission}}</text>
				</view>
			
				<button class="cz"  @tap="LC.$router.go('/pages/user/Withdrawal')">提现</button>
			</view>
		</view>
		
		
		<image src="../../static/ds.png" mode="" v-if="!info.is_lecturer"  @tap="tojs('')" style="display: block; height: 184rpx;width: 690rpx; margin: 20rpx auto;"></image>
		<view class="gn">
		
			<view class="list">
				<view class="item" @tap="tojs('/pages/user/Myarticle')">
					<image src="../../static/wdwz.png" mode=""></image>
					<view class="">
						我的文章
					</view>
					<u-icon name="arrow-right" class="u-icon"></u-icon>
				</view>
				<view class="item" @tap="LC.$router.go('/pages/user/star')">
					<image src="../../static/wdsc.png" mode=""></image>
					<view class="">
						我的收藏
					</view>
					<u-icon name="arrow-right" class="u-icon"></u-icon>
				</view>
				<view class="item" @tap="LC.$router.go('/pages/index/richtext',{title:'联系客服',id:'lxkf'})">
					<image src="../../static/lxkf.png" mode=""></image>
					<view class="">
						联系客服
					</view>
					<u-icon name="arrow-right" class="u-icon"></u-icon>
				</view>
				<view class="item" @tap="LC.$router.go('/pages/user/share')">
					<image src="../../static/yqyl.png" mode=""></image>
					<view class="">
						邀请有礼
					</view>
					<u-icon name="arrow-right"  class="u-icon"></u-icon>
				</view>
			</view>
		</view>
		<globalsocore ref="dh"></globalsocore>
		<button style="margin: 0 30rpx;" class="logout" @tap="LC.$store('user').logout()">退出登录</button>
		<globalModel ref='model' tip="只有讲师才可以查看收益，您是否想申请讲师?" confirmText='确定' cancelText='取消' @confirm="()=>{LC.$router.go('/pages/user/auth')}"></globalModel>


	</view>
</template>

<script setup>
	import LC from '../../LC';

	import {
		computed,
		reactive,
		ref,
		onMounted,
		getCurrentInstance,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'

	let state = reactive({
		show: false,
	})
	let info = computed(() => LC.$store('user').info)

	function toauth() {
		if (info.value.auth_trans != "认证中") {
			LC.$router.go('/pages/user/auth')
			return
		}
		uni.$u.toast('认证中')

	}
	let dh=ref(null)
	onShow(() => {
		LC.$store('user').userinfo()
	})
	let model=ref(null)
	
	function tojs(p){
		if(info.value.is_lecturer_status===0||info.value.is_lecturer_status===3){
			model.value.open()
			return
		}
		if(info.value.is_lecturer_status===1){
			uni.$u.toast('讲师审核中，请勿重复提交')
			return
		}
		LC.$router.go(p)
	}

	function copy(a) {
		if (a) {
			uni.setClipboardData({
				data: a, //当前点击的地址
				success: () => {
					uni.showToast({
						title: '已复制',
						icon: "none"
					})
				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	.page-wapper{
		background: linear-gradient( 180deg, #FFEDEB 0%, #FFFFFF 100%);
	}
	page {
		background-color: #f5f4f7;
	}

	.mzsm {
		background-image: url(/static/znbg.png);
		background-size: 100% 100%;
		margin: 26rpx 30rpx;

		margin-top: 22rpx;
		font-size: 22rpx;
		font-weight: 400;
		color: #f7d586;
		line-height: 36rpx;
		padding: 30rpx 46rpx;
	}

	.gn {

		width: 630rpx;
		background: #FFFFFF;
		box-shadow: 0px 0rpx 30rpx 0px rgba(236,236,236,0.14);
		border-radius: 12rpx ;
		border: 2rpx solid #EBEBEB;
		padding:0rpx 30rpx 20rpx;
		margin: 0 30rpx;
		margin-top: 25rpx;

		.title {
			font-size: 34rpx;
			font-weight: 600;
			color: #333;
			line-height: 44rpx;
			margin-bottom: 36rpx;
		}

		.list {
			

			.item {
				width: 100%;
				border-bottom: 1px solid #EBEBEB;
				font-size: 26rpx;
				font-weight: 400;
				display: flex;
				color: #333;
				
				font-weight: 400;
				font-size: 30rpx;
				padding: 30rpx 0;
				color: #333334;
				line-height: 35rpx;
				.u-icon{
					margin-left:auto;
				}
				image {
					margin-right: 15rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
	.coin-wapper{
		background: #FFFAFA;
		border-radius: 12rpx;
		border: 2px solid #F4DEDD;
		margin: 0 30rpx;
		margin-top: 24rpx;
	}

	.coin {
	
		padding: 30rpx;
		
		

		.left {
			.icon {
				margin-right: 15rpx;
				width: 43rpx;
				height: 44rpx;
			}

			font-size: 26rpx;
			font-weight: 500;
			color: #6d4017;
			padding-left: 16rpx;
			line-height: 44rpx;

			text {
				font-weight: 400;
				font-size: 30rpx;
				color: #D9444B;
				line-height: 35rpx;
				padding-left: 10rpx;
			}
		}

		.cz {
			margin-right: 0;
			width: 122rpx;
			height: 60rpx;
			background: linear-gradient( 90deg, #FB5351 0%, #FF7352 100%);
			border-radius: 58rpx;
			line-height: 48rpx;

			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 30px;
			text-align: center;
		}
	}

	.button1 {


		height: 86rpx;
		flex-shrink: 0;
		margin-top: auto;
		background-color: #FC5652;
		border-radius: 15rpx;
		font-weight: 400;
		font-size: 31rpx;
		width: 100%;
		line-height: 86rpx;
		color: #fff;
		margin-top: -30rpx;

		&.dis {
			background-color: #CCCCCC;
		}

		&::after {
			display: none;
		}


	}

	.top-info {
		width: 100%;
		height: 230rpx;
		
		border-radius: 0px 0px 40rpx 40rpx;
		position: relative;
		padding: 60rpx 30rpx;
		box-sizing: border-box;

		.avatar {
			height: 120rpx;
			width: 120rpx;
		}

		.info {
			color: #fff;
			margin-left: 30rpx;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #303030;
			}

			.id {
				margin-top: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #939496;
			}

		}

		.qd {
			margin-left: auto;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
			border-radius: 58rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			padding: 10rpx 20rpx;
			line-height: 30rpx;
			width: 122rpx;
			height: 60rpx;
			
			background: linear-gradient( 90deg, #FB5351 0%, #FF7352 100%);
		}
	}
	.logout{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #333334;
		line-height: 80rpx;
		background: #FAFAFA;
		margin-top: 30rpx;
		height: 6;
		border-radius: 12rpx;
		border: 1rpx solid #EBEBEB;
	}

	.databannar {
		position: relative;
		z-index: 1;
		width: 690rpx;
		margin: 0rpx 30rpx 0;
		margin-top: 30rpx;
		background: #FFFAFA;
		border-radius: 12rpx;
		border: 1rpx solid #F4DEDD;
		&-top {
			height: 96rpx;
			background: linear-gradient(270deg, #262628, #2f2f32);
			box-shadow: 0px 2rpx 8rpx 0px rgba(0, 0, 0, .02);
			border-radius: 30rpx 30rpx 0px 0px;
			font-size: 22rpx;
			font-weight: 500;
			color: #f7d586;
			line-height: 96rpx;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;

			.left {
				image {
					width: 42rpx;
					height: 33rpx;
				}
			}
		}

		&-bot {
			
			background: #FFFAFA;
		
			border-radius: 12rpx;
			border: 1rpx solid #F4DEDD;
			width: 690rpx;
			display: flex;
			padding: 40rpx 0;

			.item {
				width: 33.3%;
				text-align: center;

				.value {
					
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: #D9444B;
					line-height: 47rpx;
				}

				.title {
					margin-top: 10rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 33rpx;
				}

			}
		}
	}
</style>